<template>
	<view class="box col-warpper">
		<!-- tab区 start -->
		<scroll-view :scroll-x="true">
			<view class="tab-con row-warpper">
				<view v-for="(item,index) in tabList" :key="index" class="tab" @click="tabClickHandel(index)"
					:class="value===index?'active-tab':''">{{item}}</view>
			</view>
			<!-- <view class="tab" @click="value=2" :class="value===2?'active-tab':''">2222</view> -->
		</scroll-view>
		<!-- tab区 end -->
	</view>
</template>

<script>
	export default {
		props: ["value", "tabList"],
		methods: {
			/**
			 * tab被点击事件
			 * @param {int} index 被点击tab的索引
			 */
			tabClickHandel(index) {
				this.$emit("input", index)
			}
		}
	}
</script>

<style lang="less" scoped>
	.box {
		// align-items: stretch;

		background-color: #FFFFFF;

		.tab-con {
			align-self: stretch;
			justify-content: center;
			padding: 5px 0;

			.tab {
				padding: 15px 10px;
				border-bottom: 1px solid transparent;
				transition: border-bottom-color .5s;
				white-space: nowrap;
				font-weight: 700;
				font-size: 14px;
			}

			.active-tab {
				border-bottom: 1px solid #007AFF;
			}
		}
	}
</style>
